import React from "react";
import { View, StyleSheet, Dimensions, Image, TextInput, TouchableOpacity, Text } from "react-native";

const w = Dimensions.get("window").width;
const h = Dimensions.get("window").height;

class demo3 extends React.Component {
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.viewbox1} >
          <Image source={{ uri: "avatar" }} style={styles.avatar} />
        </View>
        <View style={styles.viewbox2}>
            <TextInput style={styles.itext} placeholder={"  请输入用户名"}/>
            <TextInput style={styles.itext} placeholder={'  请输入密码'}/>
        </View>
        <View style={styles.viewbox3}>
          <TouchableOpacity style={styles.btn}>
            <Text style={{fontSize:20,color:'#fff'}}>登录</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.viewbox4}>
          <Text style={{color:'#737373'}}>忘记密码</Text>
          <Text style={{color:'#737373'}}>注册新用户</Text>
        </View>
        <View style={styles.viewbox5}>
            <View style={{width:w*0.3,height:1,backgroundColor:'#737373'}}></View>
               <Text>  其他登录方式  </Text>
            <View style={{width:w*0.3,height:1,backgroundColor:'#737373'}}></View>
        </View>

        <View style={styles.viewbox6}>
            <Image source={{uri:'icon1'}} style={styles.img}/>
          <Image source={{uri:'icon2'}} style={styles.img}/>
          <Image source={{uri:'icon3'}} style={styles.img}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    backgroundColor: "#ECEEEB",
    width: w,
    height: h
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius:40,
    borderWidth:3,
    borderColor:'#fff'
  },
  viewbox1:{
    flexDirection:'row',
    justifyContent:'center',
    marginTop:50,
    marginBottom:30
  },
  viewbox2:{
    width:w,
    height:120,
    alignItems:'center',
    marginBottom: 30
  },
  viewbox3:{
    width:w,
    height:80,
    alignItems: 'center'
  },
  viewbox4:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin:10
  },
  viewbox5:{
    marginTop:150,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center'
  },
  viewbox6:{
    flexDirection:'row',
    justifyContent:'center',
    marginTop:10
  },
  itext:{
    width:w*0.9,
    height:50,
    backgroundColor:'#fff',
    marginTop: 10,
    fontSize:20
  },
  btn:{
    width:w*0.9,
    height:45,
    backgroundColor:'#87CEEA',
    alignItems:'center',
    justifyContent: 'center',
    borderRadius: 5
  },
  img:{
    width:40,
    height:40,
    borderRadius:20,
    margin: 10
  }
});

export default demo3;
